<template>
    <div class="container py-3">
        <!-- 查询条件 -->
        <div class="search-content p-4 rounded-xl shadow-sm border-0 border-gray-200 mb-4">
            <div class="row g-3">
                <!-- 第一行第一列：端口号 -->
                <div class="col-6">
                    <div class="input-group">
                        <input
                            v-model="port"
                            type="number"
                            class="form-control"
                            placeholder="端口号"
                        />
                    </div>
                </div>

                <!-- 第一行第二列：查询类型 -->
                <div class="col-6">
                    <select v-model="queryType" class="form-select">
                        <option value="day">今天</option>
                        <option value="week">最近7天</option>
                        <option value="month">最近30天</option>
                        <option value="range">日期范围</option>
                    </select>
                </div>

                <!-- 第二行第一列：日期选择 - 仅今天类型显示 -->
                <div class="col-6" v-if="queryType === 'day'">
                    <div class="input-group">
                        <input v-model="queryDate" type="date" class="form-control" />
                    </div>
                </div>

                <!-- 第二行第二列：结束日期或查询按钮 -->
                <div :class="queryType === 'day' ? 'col-6' : 'col-12'" v-if="queryType !== 'range'">
                    <button
                        @click="fetchChartData"
                        class="btn btn-primary w-100"
                        :disabled="loading"
                    >
                        {{ loading ? '查询中...' : '查询' }}
                    </button>
                </div>

                <!-- 日期范围查询的开始和结束日期 -->
                <div class="col-6" v-if="queryType === 'range'">
                    <div class="input-group">
                        <input
                            v-model="startDate"
                            type="date"
                            class="form-control"
                            placeholder="开始日期"
                        />
                    </div>
                </div>
                <div class="col-6" v-if="queryType === 'range'">
                    <div class="input-group">
                        <input
                            v-model="endDate"
                            type="date"
                            class="form-control"
                            placeholder="结束日期"
                        />
                    </div>
                </div>

                <!-- 日期范围查询的查询按钮 -->
                <div class="col-12" v-if="queryType === 'range'">
                    <button
                        @click="fetchChartData"
                        class="btn btn-primary w-100"
                        :disabled="loading"
                    >
                        {{ loading ? '查询中...' : '查询' }}
                    </button>
                </div>
            </div>
        </div>

        <h5 class="text-center mb-3" v-if="!loading && chartData">
            总流量：<strong>{{ totalGb.toFixed(4) }}</strong> GB
        </h5>

        <!-- 请求加载中显示 -->
        <div v-if="loading" class="text-muted text-center">加载中...</div>

        <!-- 请求错误时显示 -->
        <div v-else-if="error" class="text-danger text-center">加载失败，请稍后重试</div>

        <!-- 图表容器添加自适应高度样式 -->
        <div
            class="chart-container"
            style="width: 100%; min-height: 400px; height: calc(100vh - 350px); overflow-x: auto"
        >
            <Bar v-if="chartData && !loading && !error" :data="chartData" :options="chartOptions" />
            <div v-else-if="!loading && !error && !chartData" class="text-muted text-center">
                暂无数据
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { Bar } from 'vue-chartjs';
import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale
} from 'chart.js';
import { useApi } from '../composables/useApi';
import { useToast } from '../composables/useToast';

const { warning } = useToast();

// 注册 Chart.js 需要用到的组件
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);

// 默认端口号常量
const DEFAULT_PORT = '1231';

// 查询参数
const port = ref(DEFAULT_PORT);
const queryType = ref('day'); // day (默认) or week or month or range
const queryDate = ref(''); // 查询指定日期（仅今天类型使用）
const startDate = ref(''); // 开始日期（仅日期范围类型使用）
const endDate = ref(''); // 结束日期（仅日期范围类型使用）

// 请求参数
const filterParams = ref({
    port: DEFAULT_PORT,
    type: 'day',
    date: '',
    start_date: '',
    end_date: ''
});

const totalGb = ref(0);

// 使用封装的 useApi 组合式函数调用接口
const { result, fetchData, loading, error } = useApi({
    url: '/terminal/flowmeter/search', // 接口地址
    method: 'get',
    manual: true, // 改为手动请求
    transform: res => {
        totalGb.value = res?.total_gb ?? 0;
        return res.data || [];
    },
    toast: true, // 使用封装的 toast 弹窗提示
    params: () => filterParams.value // 请求参数动态获取
});

// 计算属性，负责生成符合 Chart.js 格式的图表数据对象
const chartData = computed(() => {
    // 结果非数组时返回 null，不渲染图表
    if (!Array.isArray(result.value)) return null;

    return {
        // 根据查询类型动态调整 X 轴标签格式
        labels: result.value.map(item => {
            // 将时间字符串转换为Date对象
            const date = new Date(item.time);

            // 非按天查询（周/月）：显示日期格式 MM-DD
            if (queryType.value !== 'day') {
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric', // 四位数年份
                    month: '2-digit', // 两位数月份
                    day: '2-digit' // 两位数日期
                });
            }

            // 按天查询：显示时间范围（前一小时至当前时间）
            // 计算前一小时时间
            const prevDate = new Date(date);
            prevDate.setHours(prevDate.getHours() - 1);

            // 格式化当前时间为 HH:MM
            const currentTime = date.toLocaleTimeString('zh-CN', {
                hour: '2-digit', // 两位数小时
                minute: '2-digit', // 两位数分钟
                hour12: false // 24小时制
            });

            // 格式化前一小时时间为 HH:MM
            const prevTime = prevDate.toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });

            // 返回时间范围字符串（如：23:59-00:59）
            return `${prevTime}-${currentTime}`;
        }),
        datasets: [
            {
                label: '流量（GB）', // 图例标签
                data: result.value.map(item => Number(item.gb.toFixed(3))), // 数据，保留三位小数
                backgroundColor: 'rgba(54, 162, 235, 0.7)', // 柱形颜色
                borderRadius: 10, // 柱形圆角
                hoverBackgroundColor: 'rgba(54, 162, 235, 1)', // 悬浮颜色
                barThickness: 8, // 柱形宽度
                borderColor: 'rgba(54, 162, 235, 1)' // 边框颜色
            }
        ]
    };
});

// 图表配置项
const chartOptions = {
    indexAxis: 'y', // 设为横向柱状图（Y轴为类别轴）
    responsive: true, // 响应式，自适应容器大小
    maintainAspectRatio: false, // 关闭保持宽高比，允许自定义高度
    layout: {
        padding: {
            left: 0, // 增加左侧间距
            right: 10, // 增加右侧间距
            top: 10, // 增加顶部间距
            bottom: 10 // 增加底部间距
        }
    },
    plugins: {
        legend: { display: false }, // 不显示图例
        tooltip: {
            callbacks: {
                // 自定义提示内容，显示流量单位 GB
                label: ctx => `流量：${ctx.parsed.x} GB`
            }
        }
    },
    scales: {
        y: {
            offset: true, // 开启偏移使第一条和最后一条数据与边缘有间距
            grid: {
                drawTicks: false, // 不绘制刻度线，简洁美观
                drawBorder: false, // 不绘制坐标轴边框
                drawOnChartArea: false // 不绘制网格线
            },
            ticks: {
                autoSkip: false, // 禁用自动跳过标签
                maxRotation: 0, // 标签最大旋转角度0度，横向显示
                minRotation: 0,
                padding: 10 // 标签与坐标轴间距
                // 移除maxTicksLimit限制
            },
            barPercentage: 0.5, // 调整柱形高度比例
            categoryPercentage: 0.4 // 调整分类间距比例
        },
        x: {
            title: { display: true, text: '流量（GB）' }, // X轴标题
            ticks: { precision: 1 } // X轴刻度保留一位小数
        }
    }
};

// 监听查询类型变化，在不需要日期选择时清空日期值
watch(queryType, newVal => {
    // 当查询类型为最近7天或30天时，清空所有日期选择
    if (newVal === 'week' || newVal === 'month') {
        queryDate.value = '';
        startDate.value = '';
        endDate.value = '';
    }
});

const fetchChartData = async () => {
    if (!port.value) return warning('请输入端口号');

    // 格式化日期为 YYYYMMDD
    let formattedDate = '';
    let formattedStartDate = '';
    let formattedEndDate = '';

    // 只有今天类型需要处理日期
    if (queryType.value === 'day' && queryDate.value) {
        const dateObj = new Date(queryDate.value);
        if (isNaN(dateObj)) return warning('请选择有效的日期');
        formattedDate = formatDate(dateObj);
    }

    if (startDate.value) {
        const dateObj = new Date(startDate.value);
        if (isNaN(dateObj)) return warning('请选择有效的开始日期');
        formattedStartDate = formatDate(dateObj);
    }

    if (endDate.value) {
        const dateObj = new Date(endDate.value);
        if (isNaN(dateObj)) return warning('请选择有效的结束日期');
        formattedEndDate = formatDate(dateObj);
    }

    // 根据查询类型设置不同的日期参数
    filterParams.value = {
        port: port.value,
        type: queryType.value,
        date: queryType.value === 'day' ? formattedDate : '',
        start_date: queryType.value === 'range' ? formattedStartDate : '',
        end_date: queryType.value === 'range' ? formattedEndDate : ''
    };

    // 日期范围查询时验证开始日期和结束日期
    if (queryType.value === 'range') {
        if (!startDate.value || !endDate.value) {
            return warning('请选择开始日期和结束日期');
        }
        if (new Date(startDate.value) > new Date(endDate.value)) {
            return warning('开始日期不能晚于结束日期');
        }
    }

    try {
        await fetchData();
    } catch (e) {
        console.error(e);
        warning('数据加载失败，请稍后重试');
    }
};

// 日期格式化辅助函数：转换为 YYYYMMDD 格式
const formatDate = dateObj => {
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
    const day = String(dateObj.getDate()).padStart(2, '0');
    return `${year}${month}${day}`;
};
</script>

<style scoped>
/* 修改容器样式支持自适应高度 */
.container {
    max-width: 100%;
    height: auto !important; /* 移除固定高度 */
}

/* 添加图表容器样式 */
.chart-container {
    position: relative;
    width: 100%;
}
.input-group,
.form-select,
.btn {
    height: 40px;
}
/* 圆角样式优化 */
.rounded {
    border-radius: 8px !important;
}
.search-content {
    border-radius: 12px !important;
}
</style>
